<template>
  <el-popover
    ref="popper"
    popper-class="mypopper"
    placement="left"
    width="800"
    trigger="click"
  >
    <el-row class="shortcar">
      <el-col class="flex flex-between" :span="24" style="padding-top: 10px">
        <img :src="topURL" />
        <el-input
          placeholder="请输入内容"
          v-model="searchValue"
          class="input-with-select"
          style="width: 50%"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="$listeners.click(searchValue)"
          ></el-button>
        </el-input>
      </el-col>
      <!-- <el-col class="right" :span="6" style="padding-top: 10px">
				<el-input placeholder="搜索销售品" size="small" class="srch-input">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</el-col> -->
    </el-row>
    <el-row>
      <el-col>
        <ul class="mylinks clearfix">
          <!-- <li>
            <a @click="OrderChange">MSTP+</a>
          </li>
          <li class="ln">|</li> -->
          <div v-for="item in topList" :key="item.offerId">
            <li>
              <a @click="routerChange(item)">{{ item.offerName }}</a>
            </li>
            <li class="ln">|</li>
          </div>
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="dl_wrap">
        <div class="dl_box">
          <dl
            class="dl_item"
            v-for="item in dataSource"
            :key="item.catalogItemId"
          >
            <dt>
              <a
                ><i class="el-icon-s-promotion"></i
                >{{ item.catalogItemName }}</a
              >
            </dt>
            <dd v-for="offer in item.offers" :key="offer.prodId">
              <a @click="routerChange(offer)">{{ offer.offerName }}</a>
            </dd>
          </dl>
        </div>
      </el-col>
    </el-row>
    <el-button
      slot="reference"
      :style="buttonStyle"
      @click="clickHandler"
      type="primary"
      size="mini"
      >{{ text }}</el-button
    >
  </el-popover>
</template>

<script>
import OrderService from "@/api/order/OrderService.js";
import { mapState } from "vuex";
export default {
  name: "SalesButton",
  props: {
    text: {
      type: String,
      required: true,
    },
    buttonStyle: {
      type: Object,
      default: () => {
        return {
          marginRight: "10px",
        };
      },
    },
    dataSource: {
      type: Array,
      required: true,
    },
    topList: {
      type: Array,
      required: true,
    },
    //为了规则平台传参
    custSoNumber: {
      type: String,
      required: true,
    },
    operatorsSelected: {
      type: String,
      required: true,
    },
    customerOrder: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      searchValue: "",
      topURL: require("@/assets/imgs/TOP10.png"),
    };
  },
  computed: {
    ...mapState("orders", ["orderPosInfo"]),
    ...mapState("user", ["user"]),
  },
  mounted() {},
  methods: {
    //点top10中某个产品触发方法
    async routerChange(item) {
      
      //新装规则埋点
      var ruleParam = [
        {
          PUB_REQ: {
            TYPE: "GOVCRM.ORDERSET.productselect",
          },
          NEW_ORDER: {
            PRODUCT_ID: item.prodId + "", //产品ID
            PRODUCT_ID2: item.prodId + "", // 产品ID  同上
            ORDER_SOURCE_ID: this.operatorsSelected + "", //受理运营商
            ORG_ID: this.user.orgId + "", // 部门ID
            STAFF_ID: this.user.staffId + "", // 工号
            PROD_NAME: item.prodName + "", //产品名称
            REGION_TYPE: this.user.regionType + "", //区域类型
            CUST_SO_NUMBER: this.custSoNumber + "", //流水号
            CUST_ID: this.orderPosInfo.custId + "", //客户ID
            PROD_OFFER_ID: item.offerId + "", //销售品ID
          },
        },
      ];
      
      //调用规则平台
      const result = await OrderService.rulePlatfromCheck(ruleParam);
      // alert(JSON.stringify(result));
      let ruleCode = result.code;
      let ruleMsg = result.msg;
      //直接通过校验
      // ruleCode = 0; //规则平台的接口暂时不同,阻塞流程,先注掉
      if (ruleCode == 0) {
        //直接校验通过继续之前逻辑
        let prodId = item.prodId;
        this.$store.commit("orders/SET_STEPACTIVE", 3);
        let ppmCondition = {
          offerId: item.offerId,
          productId: prodId,
          prodName: item.prodName,
          serviceOfferId: "4010100000", //新装所有产品固定值
          modType: "50200003", //新装所有产品固定值
          optionId: "28", //新装所有产品固定值
          orderDate:
            this.$route.query.taskList != undefined
              ? this.$route.query.taskList.orderDate
              : "", //完成日期时间，商机任务单时会有值
        };
        sessionStorage.setItem("ppmCondition", JSON.stringify(ppmCondition));
        this.productName(ppmCondition, prodId);
      } else {
        //校验结果有警告或者拒绝，弹窗提示
        //图标样式
        let iconType = "warning";
        if (ruleCode == 2) {
          iconType = "error";
        }
        this.$confirm(ruleMsg, "提示", {
          confirmButtonText: "确定",
          type: iconType,
        })
          .then(() => {
            //不是拒绝执行（提醒或异常）
            if (ruleCode != 2) {
              //继续之前逻辑
              let prodId = item.prodId;
              this.$store.commit("orders/SET_STEPACTIVE", 3);
              let ppmCondition = {
                offerId: item.offerId,
                productId: prodId,
                prodName: item.prodName,
                serviceOfferId: "4010100000", //新装所有产品固定值
                modType: "50200003", //新装所有产品固定值
                optionId: "28", //新装所有产品固定值
                orderDate: this.$route.query.taskList.orderDate
                  ? this.$route.query.taskList.orderDate
                  : "", //完成日期时间，商机任务单时会有值
              };
              sessionStorage.setItem(
                "ppmCondition",
                JSON.stringify(ppmCondition)
              );
              this.productName(ppmCondition);
            }
          })
          .catch(() => {});
      }
    },

    // OrderChange() {
    //   let prodId = 80008007;
    //   this.$store.commit("orders/SET_STEPACTIVE", 3);
    //   this.$store.commit("orders/SET_STEPPRODID", prodId);
    //   this.productName(prodId);
    //   this.$router.push({
    //     path: "/inforentry/" + prodId,
    //     query: {
    //       customerOrder: this.customerOrder,
    //     },
    //   });
    // },

    async productName(params) {
      sessionStorage.removeItem("proName");
      let result = await OrderService.getByProdId(params);
      if (result.code == 200) {
        if (result.meta && result.meta !== {}) {
          let proName = result.meta.catalogName + result.meta.tempId;
          sessionStorage.setItem("proName", proName);
        }
      }
      this.$router.push({
        path: "/inforentryppm",
        query: {
          customerOrder: this.customerOrder,
        },
      });
    },

    clickHandler() {
      this.$emit("showpop");
      
      this.$refs.popper.doClose();
    },

    clickOffer(offer) {
      
      this.$emit("clicksale", offer);
    },
  },
};
</script>
<style lang="scss">
.mylinks {
  height: 40px;
  line-height: 40px;
  border-top: 1px dashed rgb(97, 90, 90);
  border-bottom: 1px dashed rgb(97, 90, 90);
  li {
    list-style-type: none;
    float: left;
  }
  .ln {
    margin: 0 10px;
  }
}
.dl_wrap {
  max-height: 500px;
  overflow: auto;
  .dl_box {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari 和 Chrome */
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    .dl_item {
      padding: 10px;
      margin-bottom: 10px;
      -webkit-column-break-inside: avoid;
      break-inside: avoid; /*防止断点*/
      dt {
        color: rgb(45, 12, 235);
        font-size: 16px;
      }
      dd {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
    }
  }
}

.srch-input {
  input {
    border-radius: 20px;
    background-color: #ddd;
  }
}
.shortcar {
  height: 60px;
}
</style>
